<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Wizard Page Mode Test Page</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/Wizard_test.css">
</head>

<body class="wizard_test1auto">
	<ui5-dialog id="dialog" stretch header-heading="Wizard">
		<ui5-wizard id="wiz2" content-layout="SingleStep">
			<ui5-wizard-step id="dialogStep1" icon="sap-icon://home" selectedtitle-text="Product type">
				<div class="wizard_test2auto">
					<ui5-title>1. Product Type</ui5-title><br>

					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the
						user to work with.
					</ui5-message-strip><br>

					<ui5-label>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
						sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper,
						volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
						tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec
						dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend
						sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis
						metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend,
						commodo tortor et, varius quam. Aliquam erat volutpat.
					</ui5-label>
				</div>
			</ui5-wizard-step>

			<ui5-wizard-step id="dialogStep2" title-text="Product Information" disabled>
				<div class="wizard_test5auto">
					<ui5-title>2. Product Information</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero
						sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo
						sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus,
						molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada
						nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in
						libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar,
						sapien
					</ui5-label>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Name</ui5-label>
							<ui5-input placeholder="product name..."></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Weight</ui5-label>
							<ui5-input value="3.65"></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Manifacturer</ui5-label>
							<ui5-select>
								<ui5-option selected>Apple</ui5-option>
								<ui5-option>Samsung</ui5-option>
								<ui5-option>Huawei</ui5-option>
							</ui5-select>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>5 years guarantee included</ui5-label>
							<ui5-switch id="sw2"></ui5-switch>
						</div>
					</div>
				</div>
			</ui5-wizard-step>

			<ui5-wizard-step id="dialogStep3" title-text="Options" disabled>
				<div class="wizard_test6auto">
					<ui5-title>3. Options</ui5-title><br>

					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero
						sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo
						sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus,
						molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada
						nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in
						libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar,
						sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the
						user to work with.
					</ui5-message-strip><br>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Manifacture date</ui5-label>
							<ui5-date-picker></ui5-date-picker>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Availability</ui5-label>
							<ui5-segmented-button>
								<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
								<ui5-toggle-button>In depot</ui5-toggle-button>
								<ui5-toggle-button>Damaged</ui5-toggle-button>
								<ui5-toggle-button>Out of stock</ui5-toggle-button>
							</ui5-segmented-button>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Size</ui5-label>
							<ui5-segmented-button>
								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
								<ui5-toggle-button>Medium</ui5-toggle-button>
								<ui5-toggle-button>Large</ui5-toggle-button>
							</ui5-segmented-button>
						</div>
					</div>
				</div>

			</ui5-wizard-step>

			<ui5-wizard-step id="dialogStep4" title-text="Pricing" disabled>
				<div class="wizard_test6auto">
					<ui5-title>4. Pricing</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero
						sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo
						sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus,
						molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada
						nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in
						libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar,
						sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the
						user to work with.
					</ui5-message-strip><br>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Price</ui5-label>
							<ui5-input placeholder="product price..."></ui5-input>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Quantity</ui5-label>
							<ui5-input placeholder="product quantity..."></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Vat included</ui5-label>
							<ui5-switch checked></ui5-switch>
						</div>
					</div>
				</div>
			</ui5-wizard-step>
		</ui5-wizard>
		<ui5-bar id="footer" slot="footer" design="Footer">
            <ui5-button id="prevButton" design="Emphasized" slot="endContent">Previous Step</ui5-button>
            <ui5-button id="nextButton" design="Emphasized" slot="endContent">Next step</ui5-button>
			<ui5-button id="finalize2" design="Emphasized" slot="endContent">Finalize</ui5-button>
			<ui5-button id="cancel" design="Transparent" slot="endContent">Cancel</ui5-button>
		</ui5-bar>
	</ui5-dialog>
	<ui5-button style="display: inline-block" id="button">Open Dialog</ui5-button>

	<script>
		// WIZARD IN DIALOG
		const btnOpenDialog = document.getElementById("button");
		const dialog = document.getElementById("dialog");
		const wiz2 = document.getElementById("wiz2");
		const nextStepButton = document.getElementById("nextButton");
		const previousStepButton = document.getElementById("prevButton");
		const cancelButton = document.getElementById("cancel");
		const finalizeButton = document.getElementById("finalize2");

        const getStep = (wizard, idx) => Array.from(wizard.children)[idx];

		const deselectAll = (wizard) => {
			Array.from(wizard.children).forEach(step => {
				step.selected = false;
			});
		}

		const setStep = (wizard, idx) => {
			const step = getStep(wizard, idx);
			step.selected = true;
			step.disabled = false;
		}

		const setNextStep = (wizard, currentStepIndex, nextStepIndex) => {
			const nextStep = getStep(wizard, nextStepIndex);
			const currentStep = getStep(wizard, currentStepIndex);

			nextStep.selected = true;
			currentStep.disabled = false;
		}

		const setPreviousStep = (wizard, currentStepIndex, previousStepIndex) => {
			const previousStep = getStep(wizard, previousStepIndex);
			const currentStep = getStep(wizard, currentStepIndex);

			previousStep.selected = true;

			currentStep.disabled = false;
		}

		const setButtonVisibility = (index, totalItems) => {
			const nextButton = document.getElementById('nextButton');
			const prevButton = document.getElementById('prevButton');
			const finalizeButton = document.getElementById('finalize2');

			if (index === 0) {
				finalizeButton.style.display = 'none';
				prevButton.style.display = 'none';
				nextButton.style.display = 'block';
			} else if (index === totalItems - 1) {
				prevButton.style.display = 'block';
				finalizeButton.style.display = 'block';
				nextButton.style.display = 'none';
			} else {
				prevButton.style.display = 'block';
				nextButton.style.display = 'block';
			}
		};

		btnOpenDialog.addEventListener("click", () => {
			dialog.open = true;
			const index = wiz2.getSelectedStepIndex();
			setButtonVisibility(index, wiz2.children.length);
		});

		wiz2.addEventListener("ui5-step-change", event => {
			const index = wiz2.getSelectedStepIndex();
			setButtonVisibility(index, wiz2.children.length)
		});

		nextStepButton.addEventListener("click", () => {
			const index = wiz2.getSelectedStepIndex();
			setNextStep(wiz2, index, index + 1);
			setButtonVisibility(index + 1, wiz2.children.length)
		});

		previousStepButton.addEventListener("click", () => {
			const index = wiz2.getSelectedStepIndex();
			deselectAll(wiz2);
			setPreviousStep(wiz2, index, index - 1);
			setButtonVisibility(index - 1, wiz2.children.length)
		});

		cancelButton.addEventListener("click", () => {
			dialog.open = false;
		});

		finalizeButton.addEventListener("click", () => {
			alert("Finalize");
			dialog.open = false;
		});
	</script>
</body>
</html>
